{extend name="common" /}

{block name="content"}
<link rel="stylesheet" href="__css__/find.css">

<div id="app" v-cloak>
  <div class="container">
    <form class="layui-form">
      <div class="layui-form-item">
        <div class="layui-inline">
          <div class="layui-input-inline" style="width:550px">
            <input class="layui-input" type="text" v-model="search.account" placeholder="请输入账号" autocomplete="off">
          </div>
          <div class="layui-input-inline" style="width: 80px">
            <button type="button" class="layui-btn" @click="getList">查找</button>
          </div>
        </div>
        <div class="layui-inline">
          <div class="layui-input-inline">
            <!-- v-model 不生效，需要用layui的radio监听 否则无法生效 -->
            <input type="radio" name="type" value="friend" title="找人" lay-filter="changeType"
                   :checked="search.type === 'friend'">
            <input type="radio" name="type" value="group" title="找群" lay-filter="changeType"
                   :checked="search.type === 'group'">
          </div>
        </div>
      </div>

      <div class="layui-form-item">
        <block v-if="list.length">
          <div class="recommend">
            <div class="item" v-for="(item,index) in list" :key="index">
              <div class="avatar">
                <img :src="item.avatar" alt="用户头像">
              </div>
              <div class="info">
                <p>{{ item.nickname }}</p>
                <p>({{ item.account }})</p>
                <p :title="item.signature">{{ item.signature }}</p>
                <button type="button" class="layui-btn layui-btn-sm layui-btn-normal layui-icon layui-icon-addition"
                        @click="makeFriend(item)"> 交友
                </button>
              </div>
            </div>
          </div>
        </block>
        <block v-else>
          <p class="tips">啊哦没有更多了 o(╥﹏╥)o</p>
        </block>
      </div>
    </form>
    <!-- 分页 -->
    <div id="page" v-show="list.length"></div>
  </div>
</div>
{/block}

{block name="js"}
<script src="__js__/vue.min.js"></script>
<script>
    layui.use(['layim', 'toolkit', 'form', 'laypage'], function () {
        var form = layui.form,
            laypage = layui.laypage,
            layim = layui.layim,
            toolkit = layui.toolkit;

        var app = new Vue({
            el: '#app',
            mounted() {
                this.getList();
                this.fromListen();
            },
            data: {
                list: [],
                search: {
                    type: 'friend',
                    account: '',
                    page: 1,
                    limit: 10
                }
            },
            methods: {
                fromListen() {
                    var _this = this;
                    form.on('radio(changeType)', function (data) {
                        _this.search.page = 1;
                        _this.search.type = data.value;
                        _this.getList();
                    });
                    form.render();
                },
                //获取列表
                getList() {
                    var _this = this;
                    toolkit.request.get({
                        url: '/chat/find',
                        data: _this.search
                    }, function (res) {
                        _this.list = res.data.list;
                        laypage.render({
                            elem: 'page',  //注意，这里的 test1 是 ID，不用加 # 号
                            count: res.data.count, //数据总数，从服务端得到
                            curr: _this.search.page,//起始页
                            limit: _this.search.limit,//每页显示的条数
                            limits: [10, 20, 30, 40, 50],
                            layout: ['prev', 'page', 'next', 'count', 'limit'],//'prev', 'page', 'next', 'count', 'limit', 'skip', 'refresh'
                            jump: function (obj, first) {
                                //obj包含了当前分页的所有参数，比如：
                                console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
                                console.log(obj.limit); //得到每页显示的条数
                                //首次不执行
                                if (!first) {
                                    _this.search.page = obj.curr;
                                    _this.getList();
                                }
                            }
                        });
                    });
                },
                //加好友/加群
                makeFriend(userInfo) {
                    var _this = this;
                    //弹出添加面板
                    layim.add({
                        type: _this.search.type, //friend：申请加好友、group：申请加群
                        username: userInfo.username, //好友昵称，若申请加群，参数为：groupname
                        avatar: userInfo.avatar, //头像
                        submit: function (group, remark, index) {
                            toolkit.msg.close(index); //关闭改面板
                            //发送加友、群请求
                            toolkit.request.post({
                                url: '/chat/makeFriend',
                                data: {
                                    type: _this.search.type,//加友friend,加群group
                                    to: userInfo.id,//用户ID，群ID
                                    remark: remark,//附加信息
                                    friend_group_id: group, //我的好友分组ID，若为添加群，值为 undefined
                                }
                            })
                        }
                    });
                }
            }
        })
    });
</script>
{/block}
